<template>
	<view>
		<view class="middle">
			<image class="click-img" src="../../../static/vip/click.png" mode=""></image>
			<text class="text-col">30分钟以上</text>
			<image class="xing-img" src="../../../static/vip/xing.png" mode=""></image>
			<text class="text-col">切墩(初级)</text>
		</view>
		<view class="connect">
			<view class="left-connect">用料</view>
			<view class="right-connect">加入清单</view>
		</view>
		<view class="ul">
			<ul>
				<li v-for="(item,index) in ulData" :key="item.name">
					<text>{{item.name}}</text>
					<text class="right-text">{{item.number}}</text>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		props:['ulData'],
		data(){
			return {
				
			}
		}
	}
</script>

<style>
	.middle {
		text-align: center;
		margin-top: 41rpx;
	}
	
	.connect {
		display: flex;
		margin-top: 40rpx;
		padding-left: 32rpx;
		margin-bottom: 34rpx;
		justify-content: space-between;
	}
	
	.click-img,
	.xing-img {
		width: 36rpx;
		height: 36rpx;
		vertical-align: middle;
	}
	.text-col {
		color: rgb(104, 104, 104);
		font-size: 30rpx;
		vertical-align: middle;
		margin-left: 14rpx;
	}
	.xing-img {
		margin-left: 40rpx;
	}
	ul {
		list-style: none;
		padding: 0;
		margin: 0 auto;
	}
	
	li>text {
		font-size: 28rpx;
		color: rgb(104, 104, 104);
		letter-spacing: 2rpx;
		white-space: nowrap;
	}
	
	li {
	
		display: flex;
		justify-content: space-between;
		width: 680rpx;
		height: 72rpx;
		line-height: 72rpx;
		margin: 0 auto;
		border-top: 1px solid #eeeeee;
		border-bottom: 1px solid #EEEEEE;
	
	}
	.left-connect {
		font-weight: bold;
	}
	
	.right-text {
		margin-right: 160rpx;
		display: inline-block;
		width: 100rpx;
		text-align: left;
	}
	.right-connect {
		margin-right: 32rpx;
		color: orange;
	}
</style>
